/*
超屌的表格控件
██████ █  █  █ ██████ ██  ██ █████▄
█    █ █▄▄█▄▄█ █    █ ██  ██ ██▄▄██
█    █ █▀▀█▀▀█ █    █ ██  ██ ██▀▀▀
██████ █  █  █ ██████ ▀████▀ ██
*/


const Tablesorter = (($) => {
    const DATA_KEY = 'tablesorter';
    const Fixed_List = ["top","right","bottom","left"]
    const Default = {
        width:1200,
        height:300,
        fixed:[],
    }
    class Tablesorter{
        constructor(element,config){
            this._table = $(element);
            //添加tablesorter在外层
            this._table.addClass("ohm-table");
            this._el = $("<div class='ohm-tablesorter'></div>")
            this._content = $("<div class='ohm-tablesorter-content'></div>")
            this._el.append(this._content)
            this._table.append()
            this._table.after(this._el).appendTo(this._content);
            this.init(config);
        }
        register(fixedTables){
            let self = this;
            let sort_th = this._table.find("thead th");
            let tbody = this._table.find("tbody")
            let row = [];
            let sorted = false;
            tbody.find("tr").each((i,el)=>{
                let col = []
                $.forEach(el.children,c=>{
                    col.push(c.innerText)
                })
                row.push({
                    el,
                    col
                })
            })
            sort_th.each(function (i) {
                //如果要排序就注册事件给它
                if(this.hasAttribute("sort")) {
                    $(this).click(function (e) {
                        tbody.empty();
                        row.sort(function (x,y) {
                            let _x = parseFloat(x.col[i]);
                            let _y = parseFloat(y.col[i]);
                            if(sorted){
                                if (_x < _y) {
                                    return -1;
                                } else if (_x > _y) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }else{
                                if (_x > _y) {
                                    return -1;
                                } else if (_x < _y) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }
                        })
                        $(this).toggleClass("down")
                        sorted = !sorted;
                        $.forEach(row,r=>{
                            tbody.append(r.el)
                        })
                        $.forEach(fixedTables,table=>{
                            table.empty();
                            table.append(self._table.clone());
                            self.fixedSort(table)
                        })
                    })
                    $.forEach(fixedTables,table=>{
                        self.fixedSort(table)
                    })

                }

            })

        }
        fixedSort(fixedTables){
            let sort_th = fixedTables.find("thead th");
            let _sort_th = this._table.find("thead th");
            sort_th.each(function (i) {
                $(this).click(function (e) {
                    $(_sort_th[i]).trigger("click")
                })
            })
        }
        init(config){
            //去掉所有fixed
            this._table.css("width",config.width);
            if(config.width=="100%"){
                this._content.css({
                    height:config.height,
                    overflowX:"hidden"
                });
            }else {
                this._content.css({
                    height:config.height,
                    overflowX:"scroll"
                });
            }
            this._el.find(".ohm-tablesorter-fixed").remove();
            this._content.unbind()
            this._content[0].scrollLeft = 0;
            let fixed_table = []
            $.forEach(config.fixed,f=>{
                var cssConfig = void 0;
                switch (f){
                    case "top":
                        cssConfig = {
                            height:this._table.find("tr:eq(0)")[0].offsetHeight
                        }
                        if(config.width=="100%") cssConfig.paddingRight = 17;
                        var el_fixed = $("<div class='ohm-tablesorter-fixed'></div>").addClass(f).css(cssConfig)
                        this._content.scroll(()=>{
                            el_fixed.css({
                                marginLeft: 0-this._content[0].scrollLeft
                            })
                            if(this._content.scrollTop()==0){
                                el_fixed.addClass("hidden")
                            }else{
                                el_fixed.removeClass("hidden")
                            }
                        })
                        break;
                    case "left":
                        cssConfig = {
                            width:this._table.find("tr:eq(0)").children().eq(0)[0].offsetWidth,
                        }
                        var el_fixed = $("<div class='ohm-tablesorter-fixed'></div>").addClass(f).css(cssConfig)
                        this._content.scroll(()=>{
                            el_fixed.css({
                                marginTop: 0-this._content[0].scrollTop
                            })
                            if(this._content.scrollLeft()==0){
                                el_fixed.addClass("hidden")
                            }else{
                                el_fixed.removeClass("hidden")
                            }
                        })
                        break;
                    case "right":
                        console.error('Right side fixed is not supported for the time being')
                        break;
                    case "bottom":
                        console.error('Bottom side fixed is not supported for the time being')
                        break;
                }
                if(cssConfig){
                    el_fixed.addClass("hidden")
                    this._el.append(el_fixed)
                    el_fixed.append(this._table.clone())
                }
                fixed_table.push(el_fixed)
            });
            this.register(fixed_table)
        }
        static _jQueryInterface(config) {
            return this.each(function () {
                const $element = $(this)
                let data = $element.data(DATA_KEY)
                if($.type(config)=="object"){
                    config = $.extend(Default,config)
                    //如果只配置一个，可以用string
                    if($.type(config.fixed)=="string"){
                        config.fixed = $.filter(Fixed_List,fl=>{
                            return fl==config.fixed
                        })
                    }
                }else{
                    config = Default
                }
                if (!data) {
                    data = new Tablesorter(this,config);
                    $element.data(DATA_KEY, data)
                }else{
                    data.init(config)
                }
            })
        }
    }

    $.fn[DATA_KEY] = Tablesorter._jQueryInterface
    return Tablesorter

})($)


export default Tablesorter